<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button id="btn" onclick="alert('1231')">按钮</button>
        <button id="btn1">按钮1</button>
        <button onclick="kk()">按钮2</button>
    </div>
    <script>
        /* 
            DOM对象：宿主对象
                文档对象模型：Document Object Model , 可以让JS去操作网页，
                将网页中每一部分都转换为对象

            节点 Node：
                    文档节点：index.html  整个文档
                    元素节点：h1  p  span  body html header
                    属性节点：id  class
                    文本节点：标签中的文本内容

            浏览器提供了一个文档节点对象，是window对象的属性 ，代表整个网页
         */
        var btn = document.getElementById("btn");
        var btn1 = document.getElementById("btn1");
        console.log(btn);
        btn.innerHTML = "我是按钮123"

        console.dir(btn)

        btn1.onclick = function () {
            alert("点击了一下")
        }

        function kk() {
            alert("sdfsfd")
        }
    </script>
</body>

</html>